<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>TweenMax</title>
    <style type="text/css">
    .ef-scroll-ani-total-box{
        position: relative;
        top: 0;
        left: 0;
        overflow: hidden;
        width: 100%;
        height: 100vh;
    }
    .ef-scroll-ani{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        overflow: hidden;
        will-change: opacity;
        
    }
    .ef-scroll-ani-trigger{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .ef-scroll-ani-inter{
        position: relative;
    }
    </style>
    <style type="text/css">
    body{
        margin: 0;
    }
    .grey{ width: 200px; height: 100px; border: 1px solid #DDD; text-align: center;}
    </style>
</head>
<body>
    
    <div id='animationA-trigger-1'></div>
    <div class="ef-scroll-ani-total-box">
        <div class="ef-scroll-ani">
            <div class="ef-scroll-ani-trigger">
                <div class="ef-scroll-ani-inter">
                    <h2>第1组</h2>
                    <div class="grey greyA1">Bounce.easeIn</div>
                    <div class="grey greyA2">Bounce.easeOut</div>
                    <div class="grey greyA3">Bounce.easeInOut</div>
                </div>
            </div>
        </div>
    </div>
    <div id='animationA-trigger-2'></div>
    <div class="ef-scroll-ani-total-box">
        <div class="ef-scroll-ani">
            <div class="ef-scroll-ani-trigger">
                <div class="ef-scroll-ani-inter">
                    <h2>第2组</h2>
                    <div class="grey greyB1">Elastic.easeIn</div>
                    <div class="grey greyB2">Elastic.easeOut</div>
                    <div class="grey greyB3">Elastic.easeInOut</div>
                </div>
            </div>
        </div>
    </div>
    <div id='animationA-trigger-3'></div>
    <div class="ef-scroll-ani-total-box">
        <div class="ef-scroll-ani">
            <div class="ef-scroll-ani-trigger">
                <div class="ef-scroll-ani-inter">
                    <h2>第3组</h2>
                    <div class="grey greyC1">Power0.easeIn</div>
                    <div class="grey greyC2">Power0.easeOut</div>
                    <div class="grey greyC3">Power0.easeInOut</div>
                    <div class="grey greyC4">Power0.easeNone(对于线性动画，请使用Power0.easeNone)</div>
                </div>
            </div>
        </div>
    </div>
    
    
    
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.1/gsap.min.js"></script>
<script src="https://www.tweenmax.com.cn/greensock-js/minified/TweenMax.min.js"></script>
<script>
const layoutH = typeof window !== 'undefined' ? window.innerHeight : 1042;
const tw1 = new TimelineMax();
console.log('tw1', tw1);
tw1.to('.greyA1', 2, {
    x: 300,
    ease: Bounce.easeIn,
    triggerElement: '#animationA-trigger-3',
});
tw1.to('.greyA2', 2, {
    x: 300,
    ease: Bounce.easeOut,
}, 0);
TweenMax.to('.greyA3', 2, {
    x: 300,
    ease: Bounce.easeInOut,
});
</script>

<script>
TweenMax.to('.greyB1', 2, {
    x: 300,
    ease: 'Elastic.easeIn',
});
TweenMax.to('.greyB2', 2, {
    x: 300,
    ease: 'Elastic.easeOut',
});
TweenMax.to('.greyB3', 2, {
    x: 300,
    ease: 'Elastic.easeInOut',
});
</script>

<script>
TweenMax.to('.greyC1', 2, {
    x: 300,
    ease: 'Power0.easeIn',
});
TweenMax.to('.greyC2', 2, {
    x: 300,
    ease: 'Power0.easeOut',
});
TweenMax.to('.greyC3', 2, {
    x: 300,
    ease: 'Power0.easeInOut',
});
TweenMax.to('.greyC4', 2, {
    x: 300,
    ease: 'Power0.easeNone',
});
</script>
</html>
